<template>
    <!-- html -->
    <div class="UserWatch">
        <h3>this is UserWatch</h3>
        <h3>情况1(ref定义的基本类型数据)：{{ sum }}</h3>
        <button @click="changeSum">watch情况一</button>
        <hr />
        <h3>情况2(ref定义的对象类型数据)：{{ Person.name }}</h3>
        <h3>情况2(ref定义的对象类型数据)：{{ Person.age }}</h3>
        <button @click="changeName">changeName</button>
        <button @click="changeAge">changeAge</button>
        <button @click="changeFull">changeFull</button>
        <hr />
        <h3>情况3(reactive定义的对象类型数据)：{{ Personreactive.name }}</h3>
        <h3>情况3(reactive定义的对象类型数据)：{{ Personreactive.age }}</h3>
        <button @click="react_changeName">changeName</button>
        <button @click="react_changeAge">changeAge</button>
        <button @click="react_changeFull">changeFull</button>
        <hr />
        <h3>情况4 监视ref 或 reactive 定义的 【对象类型】 数据中的某个属性 ：{{ user.name }}</h3>
        <h3>情况4 监视ref 或 reactive 定义的 【对象类型】 数据中的某个属性 ：{{ user.age }}</h3>
        <h3>情况4 监视ref 或 reactive 定义的 【对象类型】 数据中的某个属性 ：{{ user.car.c1 }}</h3>
        <h3>情况4 监视ref 或 reactive 定义的 【对象类型】 数据中的某个属性 ：{{ user.car.c2 }}</h3>
        <button @click="uer_changeName">changeName</button>
        <button @click="uer_changeAge">changeAge</button>
        <button @click="uer_changeCar1">changeCar1</button>
        <button @click="uer_changeCar2">changeCar2</button>
        <!-- <button @click="uer_changeCar2_C1">changeCar2_C1</button> -->
        <button @click="uer_changeFullCar">changeFullCar</button>
    </div>
</template>


<!-- npm i vite-plugin-vue-setup-extend -D -->
<script lang="ts" setup name='UserWatch'>
import { reactive, ref, watch } from 'vue'

//vue3中的watch只能监视以下4种数据
//1、ref定义的数据
//2、reactive定义的数据
//3、函数返回的一个值（getter函数）
//4、一个包含上述内容的数组

//情况1
let sum = ref(0)
function changeSum() {
    sum.value += 1
}

//监视属性 情况1 ref 定义的 【基本类型】 数据
const stopWatch = watch(sum, (newValue, Oladvalue) => {
    console.log("sum变化了", newValue, Oladvalue)
    if (sum.value > 10) {
        //停止监视
        stopWatch()
    }
})








//监视属性 情况2 ref 定义的 【对象类型】 数据 
let Person = ref({
    name: '张三',
    age: 22
})

function changeName() {
    Person.value.name += '~'
}
function changeAge() {
    Person.value.age += 1
}

function changeFull() {
    Person.value = {
        name: '李四',
        age: 28
    }
}

// 监视属性 情况2 ref 定义的 【对象类型】 数据  监视的是对象的地址值,若想监视的对象内部属性的变化，需要手动开启深度监视
// immediate: true 立即开启检测
// deep: true  开启深度监视
watch(Person, (newVlaue, oldValue) => {
    console.log("Person变化了", newVlaue, oldValue)
}, { deep: true })






//监视属性 情况3 reactive 定义的 【对象类型】 数据
let Personreactive = reactive({
    name: '张三',
    age: 22
})

function react_changeName() {
    Personreactive.name += '~'
}
function react_changeAge() {
    Personreactive.age += 1
}
function react_changeFull() {
    //深拷贝
    Object.assign(Personreactive, {
        name: '李四',
        age: 82
    })
}

//情况3 reactive 定义的 【对象类型】 数据,默认开启深度监视
watch(Personreactive, (newVlaue, oldValue) => {
    console.log("Personreactive变化了", newVlaue, oldValue)
})






//情况4 监视ref 或 reactive 定义的 【对象类型】 数据中的某个属性 
let user = reactive({
    name: '张三',
    age: 18,
    car: {
        c1: '奔驰',
        c2: '宝马'
    },
    car2: {
        c1: '奔驰'
    }
})

function uer_changeName() {
    user.name += "~"
}
function uer_changeAge() {
    user.age += 1
}
function uer_changeCar1() {
    user.car.c1 += "~"
}
function uer_changeCar2() {
    user.car.c2 += "~"
}
function uer_changeFullCar() {
    user.car = {
        c1: '法拉利',
        c2: '保时捷'
    }
}

//情况4 监视ref 或 reactive 定义的 【对象类型】 数据中的某个属性 
//若该属性值不是 【对象类型】 ，需要写成函数形式
watch(() => user.name, (newVlaue, oldValue) => {
    console.log("user.name变化了", newVlaue, oldValue)
})

//------------------------------------------------------------------------------------------------------ 重点
//若该属性值是 【对象类型】，可直接编，也可以写成函数，不过建议写成函数
//监视 对象地址和对象属性值 的变化 user.car
watch(() => user.car, (newVlaue, oldValue) => {
    console.log("user.name变化了", newVlaue, oldValue)
}, { deep: true })

//只监视 对象地址 的变化 user.car
// watch(() => user.car, (newVlaue, oldValue) => {
//     console.log("user.name变化了", newVlaue, oldValue)
// })

//只监视 对象属性值 的变化 user.car
// watch(user.car, (newVlaue, oldValue) => {
//     console.log("user.name变化了", newVlaue, oldValue)
// })







//------------------------------------------------------------------------------------------------------ 重点
//情况5  包含上述内容的数组  监视上述的多个数据
// function uer_changeCar2_C1() {
//     user.car2.c1 += "~"
// }

//监视 对象地址和对象属性值 的变化 user.car
watch([() => user.age, () => user.car], (newVlaue, oldValue) => {
    console.log("user.age, user.car变化了", newVlaue, oldValue)
}, { deep: true })

//只监视 对象属性值 的变化  user.car
// watch([() => user.age, user.car], (newVlaue, oldValue) => {
//     console.log("user.age, user.car变化了", newVlaue, oldValue)
// })

//只监视 对象地址 的变化  user.car
// watch([() => user.age, () => user.car], (newVlaue, oldValue) => {
//     console.log("user.age, user.car变化了", newVlaue, oldValue)
// })

</script>

<style>
/* 样式 */
.UserWatch {
    background-color: skyblue;
    border-radius: 10px;
    padding: 20px;
}
</style>